<template>
    <div class="friendlist" @contextmenu.prevent>
        <div class="list">
            <UserItem :userlist="friendlist" />
        </div>
        <div class="menubar">
            <div @click="openAddFriend" class="addFriend">
                <span class="iconfont icon-tianjiahaoyou" title="添加好友"></span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getUserInfo } from '@/Util';
import { FriendInfo } from '@/Util/Constant'
import axios from 'axios';
import EventBus from '@/Util/EventBus'
const { openAddFriend } = defineProps<{
    openAddFriend: any,
}>()

let friendlist = ref<FriendInfo[]>([])
onMounted(() => {
    EventBus.on('updateFriendList', getFriendList)
})
const getFriendList = async () => {
    const { data } = await axios.get('/chat/friends', {
        params: {
            username: getUserInfo().username
        }
    })
    friendlist.value = []
    data.data.forEach(async (username: string) => {
        const { data } = await axios.get('chat/searchUser', {
            params: {
                username
            }
        })
        let userinfo = {
            username,
            status: data.data.status,
            avatar: data.data.avatar,
            nickname: data.data.nickname,
            signature: data.data.signature,
            gender: data.data.gender,
        }
        friendlist.value.push(userinfo)
    });
}
</script>


<style scoped lang="less">
.friendlist {
    position: relative;
    height: 100%;

    .list {
        margin-bottom: 30px;
    }

    .menubar {

        height: 35px;
        width: 100%;
        position: fixed;
        background-color: #e0e5ee;
        left: 0;
        bottom: -1px;
        padding: 0px 10px;
        border-top: 1px solid #7e7d7d;

        .addFriend {
            width: 30px;
            height: 100%;
            padding: 5px 10px;
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover {
                background-color: #d0d5de;
            }

            .iconfont {
                cursor: pointer;
                font-size: 20px;
            }
        }
    }
}
</style>
